<template>
  <div class="score-txt">
    <div class="top">
      <div class="left">
        <span class="iconfont" :class="icon"></span>
        <span class="title">{{title}}</span>
      </div>
      <span class="sn">
        总分 {{max}} 分
      </span>
    </div>
    <div class="info">
      {{txt}}
    </div>
    <div class="bottom">
      <div class="score">
        <span class="txt">评分</span>
        <input @blur.prevent="autoScroll" type="number" v-model="point" ref="inp" class="inp">
        <span class="unit">分</span>
      </div>
      <div class="res">
        <span class="txt">理由</span>
        <input @blur.prevent="autoScroll" placeholder="扣分理由" v-model="remark" type="text" class="inp">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    icon: String,
    txt: String,
    max: {
      type: Number,
      default: 10
    },
    value: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  created () {
    // 初始化
    if (!this.value.point) {
      this.$emit('input', { point: null, remark: null, required: true })
    }
  },
  methods: {
    autoScroll () {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    }
  },
  computed: {
    remark: {
      get () {
        return this.value.remark
      },
      set (newVal) {
        this.value.remark = newVal
        this.$emit('input', this.value)
      }
    },
    point: {
      get () {
        return this.value.point
      },
      set (newVal) {
        if (newVal > this.max) {
          newVal = this.max
          this.$refs.inp.value = this.max
        }
        this.value.point = newVal
        this.$emit('input', this.value)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
  .score-txt
    min-height:200px;
    background:rgba(255,255,255,1);
    box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
    border-radius:10px;
    display flex
    flex-direction column
    .top
      display flex
      height 40px
      padding 0 10px
      display flex
      align-items center
      justify-content space-between
      .left
        display flex
        align-items center
        .iconfont
          color #F9A528
          dpr-font(16px)
        .title
          font-size:14px;
          color:rgba(85,84,93,1);
          margin-left 11px
      .sn
        font-size:11px;
        color:rgba(185,183,192,1);
    .info
      dpr-font(14px)
      color:rgba(185,183,192,1);
      line-height:29px;
      padding 0px 21px 10px 21px
      flex 1
    .bottom
      border-top 1Px solid #ECEAEA
      padding-top 16px
      padding-left 22px
      display flex
      align-items flex-start
      justify-content center
      flex-direction column
      padding-bottom 10px
      .score
        height 27px
        display flex
        align-items center
        .inp
          text-align center
          margin 0 9px
          width 93px
          height 27px
          border none
          outline none
          background-color #F5F4F7
          dpr-font(11px)
        .txt
          dpr-font(11px)
          color:rgba(85,84,93,1);
        .unit
          font-size:11px;
          color:rgba(185,183,192,1);
      .res
        height 27px
        display flex
        align-items center
        margin-top 9px
        width 90%
        .txt
          dpr-font(11px)
          color:rgba(85,84,93,1);
          width auto
        .inp
          padding-left 10px
          flex 1
          outline none
          border none
          background-color #F5F4F7
          dpr-font(11px)
          margin-left 9px
          height 27px
</style>
